<template>
    <div class="renlian">
        <div class="box">
            <div class="line"></div>
            <video id="videoCamera" class="canvas" :width="videoWidth" :height="videoHeight" autoPlay></video>
            <canvas id="canvasCamera" class="canvas" :width="videoWidth" :height="videoHeight"></canvas>
            <div class="bottom"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, nextTick } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus'
import axios from "axios";
import { useStore } from "vuex"

const store = useStore()

const router = useRouter();
const visible = ref(false);
const login = reactive({
    uname: "",
    pword: "",
    img: '',
});

// 注册
const regist = reactive({
    uname: "",
    pword: ""
})

const os = ref(false); //控制摄像头开关
let thisVideo = ref("");
let thisContext = ref("");
let thisCancas = ref("");
const videoWidth = ref(260);
const videoHeight = ref(260);
const postOptions = ref([]);
const certCtl = ref("");
const mask = ref(true);
const closedPhono = ref(null);

const getCompetence = () => {
    nextTick(() => {
        os.value = false;
        thisCancas = document.getElementById("canvasCamera");
        thisContext = thisCancas.getContext("2d");
        thisVideo = document.getElementById("videoCamera");
        closedPhono.value = thisVideo;
        if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
        }

        if (navigator.mediaDevices.getUserMedia === undefined) {
            navigator.mediaDevices.getUserMedia = function (constraints) {
                // 首先获取现存的getUserMedia(如果存在)
                let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;
                if (!getUserMedia) {
                    return Promise.reject(new Error("getUserMedia is not implemented in this browser"));
                }
                return new Promise(function (resolve, reject) {
                    getUserMedia.call(navigator, constraints, resolve, reject);
                });
            };
        }

        const constraints = {
            audio: false,
            video: { width: videoWidth.value, height: videoHeight.value, transform: "scaleX(-1)" },
        };

        navigator.mediaDevices
            .getUserMedia(constraints)
            .then(function (stream) {
                if ("srcObject" in thisVideo) {
                    thisVideo.srcObject = stream;
                } else {
                    thisVideo.src = window.URL.createObjectURL(stream);
                }
                thisVideo.onloadedmetadata = function (e) {
                    thisVideo.play();
                };
            })
            .catch((err) => {
                ElMessage.error("没有开启摄像头权限或浏览器版本不兼容");
            });
    });
};

//绘制图片
const drawImage = () => {
    getCompetence();
    thisCancas = document.getElementById("canvasCamera");
    thisContext = thisCancas.getContext("2d");
    thisVideo = document.getElementById("videoCamera");
    thisContext.drawImage(thisVideo, 0, 0, 300, 200);
    //获取图片地址
    login.img = thisCancas.toDataURL('image/png');
    store.state.dataImg = login.img;
};

const stopNavigator = () => {
    if (closedPhono.value && closedPhono.value !== null) {
        thisVideo.srcObject.getTracks()[0].stop();
        os.value = true;
    } else {
        ElMessage.error("没有开启摄像头权限或浏览器版本不兼容");
    }
};
var container = ref('container')
var ss = ref(store.state.iff)
if (ss) {
    getCompetence();
    setTimeout(() => {
        drawImage();
    }, 2000);
    setTimeout(() => {
        stopNavigator();
        store.state.iff = false;
    }, 5000);
}
</script>

<style scoped>
.renlian {
    position: relative;
    height: 200px;
    width: 200px;
    margin: 100px auto;
    background: url("../assets/img/timg.png") no-repeat;
    background-size: 100% 100%;
}

.renlian .box {
    width: 30vw;
    height: 30vw;
    max-height: 30vh;
    max-width: 30vh;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border: 0.1rem solid rgba(3, 169, 244, 0.2);
}

.renlian .line {
    position: absolute;
    height: calc(100% - 2px);
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #03a9f4 211%);
    border-bottom: 2px solid #03a9f4;
    transform: translateY(-100%);
    animation: radar-beam 2s infinite;
    animation-timing-function: cubic-bezier(0.3, 0, 0.43, 0.7);
    animation-delay: 1.4s;
}

.renlian .box:after,
.renlian .box:before,
.renlian .bottom:after,
.renlian .bottom:before {
    content: '';
    display: block;
    position: absolute;
    width: 3vw;
    height: 3vw;

    border: 0.2rem solid transparent;
}

.renlian .box:after,
.renlian .box:before {
    top: 0;
    border-top-color: #03a9f4;
}

.renlian .bottom:after,
.renlian .bottom:before {
    bottom: 0;
    border-bottom-color: #03a9f4;
}

.renlian .box:before,
.renlian .bottom:before {
    left: 0;
    border-left-color: #03a9f4;
}

.renlian .box:after,
.renlian .bottom:after {
    right: 0;
    border-right-color: #03a9f4;
}

@keyframes radar-beam {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

.box {
    width: 200px;
    height: 200px;
    margin-top: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    float: left !important;
}
</style>